import React,{ useState, forwardRef, useImperativeHandle } from 'react';
import { Modal,Input, Radio, message } from 'antd';
// 引入添加用户和修改用户接口
import { adduserFn, edituserFn } from '../api/user'
const Motai = forwardRef((props, ref) => {
    // 定义控制模态框的显示和隐藏
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 定义表单数据的存储(受控组件)
    const [userinfo, setuserinfo] = useState({ gender: '1' });
    // 定义模态框标题
    const [title, settitle] = useState('')
    // 表单的修改事件
    const onChange = (key, e) => {
        userinfo[key] = e.target.value;
        setuserinfo({ ...userinfo });
    };
    // 控制模态框显示隐藏事件
    const showModal = () => {
        setIsModalOpen(true);
    };
    // 点击确定
    const handleOk = () => {
        setIsModalOpen(false);
        // 根据标题判断是添加还是编辑
        if (title == '添加') {
            // 调用添加用户接口
            adduserFn(userinfo).then(res => {
                if (res.data.errNo == 0) {
                    message.success('添加成功!', 1, () => {
                        // 重新请求最新的用户列表
                        props.getuserlistFn({ page: props.page })
                        // 清空输入的历史
                        setuserinfo({ gender: '1' })
                    })

                } else {
                    message.error(res.data.errText, 1)
                }
            })
        } else if (title == '编辑') {
            // 调用编辑用户接口
            edituserFn(userinfo).then(res => {
                if (res.data.errNo == 0) {
                    message.success('编辑成功!', 1, () => {
                        // 重新请求最新的用户列表
                        props.getuserlistFn({ page: props.page })
                         // 清空输入的历史
                         setuserinfo({ gender: '1' })
                    })
                } else {
                    message.error(res.data.errText, 1)
                }
            })
        }
    };
    // 点击取消
    const handleCancel = () => {
        setIsModalOpen(false);
        // 清空输入的历史
        setuserinfo({ gender: '1' })
    };
    // 使用 useImperativeHandle抛出当前函数组件上的数据和方法
    useImperativeHandle(ref, () => {
        return {
            isModalOpen,//显示模态框的状态
            showModal, // 控制显示和隐藏模态框方法
            settitle,  // 修改模态框标题方法
            setuserinfo // 修改当前模态框的用户信息方法
        }
    })
    return (
        <Modal title={title} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
           <p>
                <Input placeholder="用户名" value={userinfo.username} onChange={(e) => onChange('username', e)} />
            </p>
            <p> <Input placeholder="密码" value={userinfo.password} onChange={(e) => onChange('password', e)} /></p>
            <p> <Input placeholder="手机号" value={userinfo.mobile} onChange={(e) => onChange('mobile', e)} /></p>
            <div>
                <Radio.Group onChange={(e) => onChange('gender', e)} value={userinfo.gender}>
                    <Radio value={'1'}>男</Radio>
                    <Radio value={'2'}>女</Radio>
                    <Radio value={'3'}>保密</Radio>
                </Radio.Group>
            </div>
            <p><Input placeholder="邮箱" value={userinfo.email} onChange={(e) => onChange('email', e)} /></p>
        </Modal>
    );
})

export default Motai;
